<template>
	<div class="echart-box">
		<div ref="element" class="charts"></div>
		<div class="choice">
			<div>选择年级：</div>
			<el-select v-model="grade">
				<el-option label="2020级" value="2020级" />
				<el-option label="2023级" value="2023级" />
				<el-option label="2022级" value="2022级" />
				<el-option label="2021级" value="2021级" />
			</el-select>
		</div>
	</div>
</template>

<script setup>
import { onMounted, reactive, ref, watch } from 'vue'
import * as echarts from 'echarts'
import { getOnLeaveSchool } from '@/utils/axios/master'

const grade = ref('2020级')
const element = ref()
let myEcharts
// const showData = reactive([])
const titleList = ['女生在校', '女生离校', '男生在校', '男生离校']
const options = reactive({
	title: {
		text: '假期去向统计',
		subtext: `${grade.value}学生`,
		left: 'center',
		top: 10,
	},
	tooltip: {
		trigger: 'item',
		formatter: '{a} <br/>{b} : {c} ({d}%)',
	},
	legend: {
		orient: 'vertical',
		left: 100,
		data: ['女生在校', '女生离校', '男生在校', '男生离校'],
		top: 100,
	},
	series: [
		{
			name: `${grade.value}学生`,
			type: 'pie',
			radius: '50%',
			data: [
				{ value: 1048, name: '女生在校' },
				{ value: 735, name: '女生离校' },
				{ value: 1200, name: '男生在校' },
				{ value: 600, name: '男生离校' },
			],
			emphasis: {
				itemStyle: {
					shadowBlur: 10,
					shadowOffsetX: 0,
					shadowColor: 'rgba(0, 0, 0, 0.5)',
				},
			},
		},
	],
})

// 初始化图标配置项
async function init() {
	myEcharts = echarts.init(element.value)
	let { data } = await getOnLeaveSchool({ grade: 2020 })
	let res = []
	
	data.forEach((item, index) => {
		let dic = {}
		dic.value = item
		dic.name = titleList[index]
		res.push(dic)
	})
	options.series[0].data = res
	myEcharts.setOption(options)
}

async function modOption(grad) {
	let { data } = await getOnLeaveSchool({ grade:grad })
	let res = []
	data.forEach((item, index) => {
		let dic = {}
		dic.value = item
		dic.name = titleList[index]
		res.push(dic)
	})

	options.series[0].data = res
	options.series[0].name = grad+"级学生"
	options.title.subtext=grad+"级学生"
	myEcharts.setOption(options)
}

watch(grade, (value) => {
	switch (value) {
		case '2020级':
			modOption(2020)
			break
		case '2023级':
			modOption(2023)
			break
		case '2022级':
			modOption(2022)
			break
		case '2021级':
			modOption(2021)
			break
	}

})

onMounted(async () => {
	init()
})
</script>

<style scoped lang="scss">
.choice {
	display: flex;
	align-items: center;
	justify-content: end;
	padding: 0 15px;
}
.el-select {
	width: 100px;
}
</style>
